{% extends "mobile/base-mobile.html" %}

{% block header %}

		<h1 style="font-family: 'Lobster'; letter-spacing: 3px;">tournaments</h1>
		<a href="/next-games" data-role="button" data-icon="back" data-iconpos="left" data-mini="true" data-inline="true">Volver</a>

{% endblock %}



{% block main %}

	<div data-role="collapsible-set">

			<center><h2 style="font-family: 'Lobster';">{{ player1 }} vs {{ player2 }}</h2></center>


			<div data-role="collapsible" data-collapsed="true" data-content-theme="b">
				<h3>Opponent times</h3>

				{% if opponentSelectedGamesDate %}

					<form id="selectForm" action="select-time" method="post">
		 				<fieldset data-role="controlgroup">

							{% for date in opponentSelectedGamesDate %}
									<input  data-inset="true" 
											type="radio" value="{{ date.date }}" name="hourselected" id="{{ date }}" data-theme="d"/>
									<label for="{{ date }}">{{ date.date.date_time }}</label>
							{% endfor %}
						</fieldset>

						<a href="#" onclick="document.getElementById('selectForm').submit();" 
						data-role="button" data-theme="b">Select</a>
					</div></form>

				{% else %}

					<div>
							<p>Your opponent hasn't done any selection yet</p>
					</div>

				{% endif %}
			</div>




			<div data-role="collapsible" data-collapsed="true" data-content-theme="b">
				<h3>Your previous preferences</h3>

				{% if mySelectedGamesDate %}
					<form id="deleteForm" action="delete-time" method="post"><div>
				 			<fieldset data-role="controlgroup">
								{% for date in mySelectedGamesDate %}
										<input  data-inset="true" data-theme="d" data-dividertheme="f" 
												type="checkbox" value="{{ date.date.pk }}" name="hours" id="{{ date.date.pk }}"/>
										<label for="{{ date.date.pk }}">{{ date.date.date_time }}</label>
								{% endfor %}
							</fieldset>
				

							<a href="#" onclick="document.getElementById('deleteForm').submit();" 
							data-role="button" data-theme="b">Delete</a>

					</div></form>

				{% else %}

					<div>
							<p>You haven't selected any time yet</p>
					</div>

				{% endif %}

			</div>
			


			<div data-role="collapsible" data-collapsed="true" data-content-theme="b">

				<h3>Select your preferred times</h3>
				<form id="saveForm" method="post"><div>

						{% for date in myUncommittedGamesDate %}
			 				<fieldset data-role="controlgroup">
								<div data-role="button" data-theme="c">{{ date.date }}</div>
								{% if today == date.date %}
									{% for hour in hours %}
											<input data-inset="true" data-theme="d" data-dividertheme="f"
												 type="checkbox" value="{{ hour }}/{{date.dateslashed}}" id="{{ hour }}" class="custom" name="hours"/>
											<label for="{{ hour }}">{{ hour }}:00</label>
									{% endfor %}
								{% else %}
									{% for hour in allhours %}
											<input data-inset="true" data-theme="d" data-dividertheme="f"
												 type="checkbox" value="{{ hour }}/{{date.dateslashed}}" id="{{ hour }}" class="custom" name="hours"/>
											<label for="{{ hour }}">{{ hour }}:00</label>
									{% endfor %}
								{% endif %}

							</fieldset>
						{% endfor %}

						<a href="#" onclick="document.getElementById('saveForm').submit();" 
						data-role="button" data-theme="b">Save</a>

				</div></form>

			</div>

	</div>

{% endblock %}
